<%--
  Created by IntelliJ IDEA.
  User: Eoly
  Date: 2016/12/8
  Time: 19:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!docType html>
<html>
<head>
  <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0 user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>登录到拼团商城</title>
  <style>
    *{padding:0;margin: 0;border: 0;}
    body,html{width: 100%;height: 100%;font-size: 12px;font-family: "Arial","Microsoft YaHei","微软雅黑","黑体",sans-serif; }
    a{text-decoration: none;color: black}
    body>div{width: 100%;}

    div.bg{width: 100%;height: 100%;background: url("${ pageContext.request.contextPath}/resources/images/j1.png")no-repeat 50% 50%;background-size: 200%;}
    div.bg-br{position: fixed;bottom: 0;z-index: -1;width: 100%;height: 100%;-webkit-filter: blur(5px);  -moz-filter: blur(5px);  -o-filter: blur(5px);  -ms-filter: blur(5px);  filter: blur(5px);}

    div.outer{padding-top: 10em;}
    div.img{width: 100px;height: 100px;border: 5px solid white;margin: 0 auto 0 auto;background: url("${ pageContext.request.contextPath}/resources/images/s1.png")no-repeat 50% 50%;background-size: 110%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;}

    div.title{width: 100%;text-align: center;line-height: 50px;font-size: 25px;color: whitesmoke;margin: 5px 0;}

    div.cen{width: 80%;margin: 0 auto;border-top: 1px solid #fff;position: relative;text-align: center;
    }
    form>div{width: 100%;text-align: center;margin: 15px auto;}
    form>div>input{background-color: rgba(255, 255, 255, 0.70);}
    input{width: 70%;height: 30px;padding: 5px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;}
    input[type="submit"]{height: 40px;width: 70%;background-color: rgba(255, 255, 255, 0.70);font-size: 14px;color: #484848; }

  </style>
</head>
<body>
<div class="bg-br">
  <div class="bg"></div>
</div>
<div class="outer">
  <div class="img"></div>
  <div class="title">登录</div>
  <div class="cen">
    <form action="${ pageContext.request.contextPath}/user/login-post" method="post" onsubmit="return check()">
      <div class="openId">
        <input type="text" name="openId" placeholder="您的OpenId"/>
      </div>
      <div class="psw">
        <input type="password" name="userPassword" placeholder="您的密码"/>
      </div>
      <input type="submit" value="登录"/>
    </form>
  </div>
</div>
<script src="${ pageContext.request.contextPath}/resources/js/jquery.min.js"></script>
<script>
  function check(){
    var openId = $(":text");
    var userPassword = $(":password");
      console.log(openId);
    if(openId.val()==''||userPassword.val()==''){
      alert("openId和密码皆不能为空");
      return false;
    }
    return true;
  }
</script>
</body>
</html>
